<template>
  <client-only>
    <div class="Page Confirm">
      <div class="Title">
        <h1 class="fl f18">订单确认</h1>
        <!-- <img src="~/assets/img/cart_setp2.png" class="fr"> -->
        <div class="clear"></div>
      </div>
      <form name="flowForm" id="flowForm" method="post" action="">
        <table class="GoodList">
          <tbody>
            <tr>
              <th class="name">商品</th>
              <th class="price">原价</th>
              <th class="priceNew">价格</th>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
            </tr>
            <tr class="good">
              <td class="name First">
                <a target="_blank" :href="`/course/${order.courseId}`">
                  <img :src="order.courseCover"
                /></a>
                <div class="goodInfo">
                  <input type="hidden" class="ids ids_14502" value="14502" />
                  <a target="_blank" :href="`/course/${order.courseId}`">{{
                    order.courseTitle
                  }}</a>
                </div>
              </td>
              <td class="price">
                <p>
                  ￥<strong>{{ order.totalFee }}</strong>
                </p>
              </td>
              <td class="red priceNew Last">
                ￥<strong>{{ order.totalFee }}</strong>
              </td>
            </tr>
            <tr>
              <td class="Billing tr" colspan="3">
                <div class="tr">
                  <p>
                    共 <strong class="red">1</strong> 件商品，合计<span
                      class="red f20"
                      >￥<strong>{{ order.totalFee }}</strong></span
                    >
                  </p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="Finish">
          <div class="fr" id="AgreeDiv">
            <el-checkbox v-model="agree"
              >我已阅读并同意<a href="javascript:;"
                >《厚溥云课堂购买协议》</a
              ></el-checkbox
            >
          </div>
          <div class="clear"></div>
          <div class="Main fl">
            <div class="fl">
              <a :href="`/course/${order.courseId}`">返回课程详情页</a>
            </div>
            <div class="fr">
              <p>
                共 <strong class="red">1</strong> 件商品，合计<span
                  class="red f20"
                  >￥<strong id="AllPrice">499</strong></span
                >
              </p>
            </div>
          </div>
          <input name="score" value="0" type="hidden" id="usedScore" />
          <el-button
            :disabled="!agree"
            type="danger"
            id="submitPay"
            @click="goPay"
            >去支付</el-button
          >
          <div class="clear"></div>
        </div>
      </form>
    </div>
  </client-only>
</template>
<script>
import orderApi from "../../api/order";
export default {
  data() {
    return {
      order: {}, //订单信息
      agree: true, //是否同意
    };
  },
  created() {
    this.initOrder();
  },
  methods: {
    // 初始化订单信息
    initOrder() {
      orderApi.showInfo(this.$route.params.cid).then((res) => {
        this.order = res.data;
      });
    },

    //去支付
    goPay() {
      orderApi.createOrder(this.$route.params.cid).then((res) => {
        //跳转到个人中心页面
        this.$router.push("/order/list");
      });
    },
  },
};
</script>